<template>
	<div class="bg-white solid padding-sm quick-group-box" style="width:100%;height: 640px !important;">
		<div class="title-box solid-bottom">
			<div class="content">待办提醒</div>
			<div class="to"></div>
		</div>
		<div style="height: calc(530px - 40px - 20px);" class="padding">
			<el-tabs v-model="tabActiveName" tab-position="top" @tab-click="handleTabClick" style="height: 100%;">
			    <el-tab-pane :label="'待我审批'+(to_check_count>0?'('+to_check_count+')':'')" name="tab1" lazy>
					<ToHandleListTable :getListRequest="to_check_list" :type="1" :key="tabRefresh[0]" />
				</el-tab-pane>
			    <!-- <el-tab-pane :label="'待我处理'+(to_handle_count>0?'('+to_handle_count+')':'')" name="tab2" lazy>开发中...</el-tab-pane> -->
			    <el-tab-pane label="我的申请" name="tab3" lazy>
					<ToHandleListTable :getListRequest="processing_list" :type="2" :key="tabRefresh[2]" />
				</el-tab-pane>
			    <el-tab-pane label="我的已通过" name="tab4" lazy>
					<ToHandleListTable :getListRequest="finished_list" :type="3" :key="tabRefresh[3]" />
				</el-tab-pane>
				<el-tab-pane label="我的被退回" name="tab5" lazy>
					<ToHandleListTable :getListRequest="back_list" :type="4" :key="tabRefresh[4]" />
				</el-tab-pane>
				<el-tab-pane label="草稿箱" name="tab6" lazy>
					<ToHandleListTable :getListRequest="draft_list" :type="5" :key="tabRefresh[5]" />
				</el-tab-pane>
				<el-tab-pane label="回收站" name="tab7" lazy>
					<ToHandleListTable :getListRequest="delete_list" :type="6" :key="tabRefresh[6]" />
				</el-tab-pane>
				<el-tab-pane label="我的审批记录" name="tab8" lazy>
					<ToHandleListTable :getListRequest="checked_list" :type="7" :key="tabRefresh[7]" />
				</el-tab-pane>
			  </el-tabs>
		</div>
	</div>
</template>

<script>
	import {
		to_check_list,
		processing_list,
		finished_list,
		back_list,
		draft_list,
		delete_list,
		checked_list,
		handle_counts
	} from '@/api/handle/personal_handle'
	import common from '@/utils/common.js';
	import {
		isArray
	} from '@/utils/util.js'
	import {
		cloneDeep
	} from 'lodash'
	import ToHandleListTable from './ToHandleListTable'
	export default {
		name: 'DashboardToHandleList',
		components: {
			ToHandleListTable
		},
		beforeDestroy() {
			clearInterval(this.timer)
		},
		// beforeRouteLeave(to, from, next) {
		// 	this.$destroy();
		// 	next();
		// },
		data() {
			return {
				timer: null,
				to_check_count: 0,
				to_handle_count: 0,
				
				to_check_list,
				processing_list,
				finished_list,
				back_list,
				draft_list,
				delete_list,
				checked_list,
				tabActiveName: 'tab1',
				tabRefresh:[1, 2, 3, 4, 5, 6, 7, 8],
			}
		},
		computed:{
		},
		mounted() {
			this.$store.dispatch('flow/getFlowObj');
			this.getHandleCount();
			this.timer = setInterval(this.getHandleCount, 60000);
		},
		methods: {
			handleTabClick(tab){
				if(tab.name != ''){
					const index = parseInt(tab.name.substring(3)) - 1;
					this.tabRefresh[index] = new Date().getTime();
				}
			},
			getHandleCount(){
				handle_counts()
				.then(({data:{
					to_check_count,
					to_handle_count
				}}) => {
					this.to_check_count = to_check_count || 0;
					this.to_handle_count = to_handle_count || 0;
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	
</style>
